<template>
    <div class="search-box">
        <div class="search-line">
            <tagsDone :selectFieldArr="selectFieldArr" @delField="delField" ref="tagsDone"></tagsDone>
            <div class="tags-obj" v-if="selectFieldRow.label">
                <span>{{ selectFieldRow.label }}</span>:
            </div>
            <input type="text" ref="inputFieldBox" size="mini" @click="showDefalutModal" class="sInput"
                :placeholder="defaultInputPlaceholderTxt" v-model="inputFieldVal" v-on:keyup.13="onkeydownM" @blur="blurInput">
            <i class="el-icon-close delAll" v-if="selectFieldArr.length" @click="delFieldAll"></i>
        </div>
        <div class="search-icon">
            <el-popover placement="bottom" width="400" trigger="click" v-model="visibleModalDefault">
                <!-- 默认选择字段框 -->
                <defaultModalList @close="getDefaultRow" type="defaultSelect" :defaults="defaults"></defaultModalList>
                <i class="el-icon-setting" slot="reference"></i>
            </el-popover>
            <i class="el-icon-search" @click="search"></i>
        </div>

        <!-- focus选择字段框 -->
        <fieldModalList v-if="visibleModalType == 'fieldModalList'" ref="showFieldModalListRef"
            @chooseField="chooseField" :defaults="defaults">
        </fieldModalList>

        <!-- 选择字段框 -->
        <selectModalList v-if="visibleModalType == 'selectModalList'" ref="showSelectModalListRef" @sure="sureSelect"
            :selectItems="selectItems"></selectModalList>

        <!-- 时间 -->
        <timeModal v-if="visibleModalType == 'timeModal'" ref="timeModalRef" @sure="sureTime"
            @cancel="visibleModalType = ''"></timeModal>

        <!-- checkbox -->
        <checkBoxModal v-if="visibleModalType == 'checkBoxModal'" ref="checkBoxModalRef" @sure="sureCheck"
            @cancel="visibleModalType = ''" :checkboxItems="checkboxItems"></checkBoxModal>
    </div>
</template>

<script>
import defaultModalList from './_parts/defaultModalList.vue';
import fieldModalList from './_parts/fieldModalList.vue';
import selectModalList from './_parts/selectModalList.vue';
import timeModal from './_parts/timeModal.vue';
import checkBoxModal from './_parts/checkBoxModal.vue';
import tagsDone from './_parts/tagsDone.vue';
import {
    pos,
    deepCopy
} from './util';
export default {
    components: {
        defaultModalList,
        fieldModalList,
        selectModalList,
        tagsDone,
        timeModal,
        checkBoxModal
    },
    data () {
        return {
            defaultInputPlaceholderTxt: '请输入搜索条件',
            defaultRow: {},
            selectFieldRow: {}, //选中的字段
            selectFieldArr: [],
            inputFieldVal: '', //输入的值
            visibleModalDefault: false, //设置 默认选择下拉框
            visibleModalType: '',

            selectItems: [],
            checkboxItems: [],
            defaults:[]
        }
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    mounted () {
        // this.$nextTick(() => {
        //     document.addEventListener("click", (e) => {
        //         let s1 = this.$refs.showFieldModalListRef;
        //         if (s1 && !s1.contains(e.target)) {
        //             this.visibleModalType = '';
        //         }
        //     });
        // });
    },
    methods: {
        blurInput(){
        },
        setDefaulSelectItems(arr){
           this.defaults = arr
        },
        search(){
            let obj = {}
          
            this.selectFieldArr.forEach((el)=>{
            
                if(el.type == 'input'){
                    obj[el.field] = `${el.value}`  
                    obj[`${el.field}-op`] = 'ct'
                }
                if(el.type == 'checkBox'||el.type == 'select'){
                    if(el.value){
                        let ar = el.value.split("|")
                        let i = this.selectItems.findIndex((item)=>{
                            return item.name == ar
                        })
                        
                        obj[el.field] = i!=-1?this.selectItems[i].code:ar
                        obj[`${el.field}-op`] = 'il'
                    }
                }
      
                if(el.type == 'dateTime'){
                    if(el.value){
                        var arr = el.value.split("-")
                        var time1 = arr.length!=0?arr[0]:''
                        var time2 = arr.length>1?arr[1]:''
                        obj[`${el.field}-0`] = time1
                        obj[`${el.field}-1`] = time2
                        obj[`${el.field}-op`] = 'bt'
                    }
                }
            })
            
            this.$emit('refreshList',obj)
        },  
        clearInputSt () {
            this.inputFieldVal = '';
            this.selectFieldRow = {}
            this.visibleModalType = ''
            this.$nextTick(() => {
                this.$refs.inputFieldBox.focus()
            });
            this.defaultInputPlaceholderTxt = '添加筛选条件'
        },
        intPlaceholderTxt () {
            if (!this.selectFieldArr.length) {
                this.defaultInputPlaceholderTxt = this.defaultRow.label?`默认按照${this.defaultRow.label}搜索`:'请输入搜索条件'
            }
        },
        checkFieldHas (operationVal) {  // 判断是否已经选择输入过 operationVal不是输入的值 其他框带过来的值
            if (this.selectFieldArr.length && this.selectFieldRow.label) {
                let hasField = this.selectFieldArr.find(el => el.label == this.selectFieldRow.label)
                // 已经输入 并且不能多字段查询  替换掉原有值
                if (hasField && !hasField.multiple) {
                    hasField.value = operationVal || this.inputFieldVal
                    this.clearInputSt()
                    return true
                }
                // 已经输入 并且可以多字段查询     
                if (hasField && hasField.multiple) {
                    let o = deepCopy(this.selectFieldRow)
                    o.value = operationVal || this.inputFieldVal
                    this.selectFieldArr.push(o)
                    this.clearInputSt()
                    return true
                }
            } else {
                return false
            }
        },
        onkeydownM () {  //输入框 鼠标enter事件
            if (this.checkFieldHas()) return
            //初始无选择字段属性 直接enter时 使用默认选择的字段属性
            if (!this.selectFieldRow.label && this.selectFieldArr.length < 1) {
                this.selectFieldRow.value = this.inputFieldVal
                this.selectFieldRow.label = this.defaultRow.label   
                this.selectFieldRow.type = this.defaultRow.type
                this.selectFieldRow.field = this.defaultRow.field
                this.selectFieldArr.push(this.selectFieldRow)
                this.clearInputSt()
            } else if (this.selectFieldRow.label) {
                this.selectFieldRow.value = this.inputFieldVal
                this.selectFieldArr.push(this.selectFieldRow)
                this.clearInputSt()
            }
        },
        delFieldAll () {
            this.selectFieldArr = []
            this.intPlaceholderTxt()
        },
        delField (obj) {
            let idx = this.selectFieldArr.findIndex(el => el.label == obj.label)
            this.selectFieldArr.splice(idx, 1)
            this.intPlaceholderTxt()
        },
        chooseField (row, $event) {
            this.selectFieldRow = row
            this.visibleModalType = ''
            this.$refs.inputFieldBox.focus()

            // 下拉框
            if (this.selectFieldRow.type == 'select') {
                this.visibleModalType = 'selectModalList'
                this.selectItems = this.selectFieldRow.value || []
                this.$nextTick(() => {
                    pos(this.$refs.showSelectModalListRef, -50, 0, $event,this.$refs.tagsDone)
                });
            }

            // 时间
            if (this.selectFieldRow.type == 'dateTime') {
                this.visibleModalType = 'timeModal'
                this.$nextTick(() => {
                    pos(this.$refs.timeModalRef, -50, 0, $event,this.$refs.tagsDone)
                });
            }

            // checkbox
            if (this.selectFieldRow.type == 'checkBox') {
                this.visibleModalType = 'checkBoxModal'
                this.checkboxItems = this.selectFieldRow.value || []
                this.$nextTick(() => {
                    pos(this.$refs.checkBoxModalRef, -50, 0, $event,this.$refs.tagsDone)
                });
            }
        },
        operationPopSure (b) {
            if (this.checkFieldHas(b.value)) return
            this.selectFieldArr.push(b)
            this.clearInputSt()
        },
        sureSelect (o) { //下拉框确定
            let b = deepCopy(this.selectFieldRow)
            b.value = o.name
            this.operationPopSure(b)
        },
        sureTime (o) { //时间框确定
            let b = deepCopy(this.selectFieldRow)
            b.value = o.beginTime + '-' + o.endTime
            this.operationPopSure(b)
        },
        sureCheck (o) { // checkbox
            if(o.length < 1) {
                this.visibleModalType = ''
                return
            }
            let _v = o.map(el => el['name'])
            let b = deepCopy(this.selectFieldRow)
            b.value = _v.join(' | ')
            this.operationPopSure(b)
        },
        showDefalutModal ($event) {
            this.visibleModalType = 'fieldModalList'
            this.$nextTick(() => {
                pos(this.$refs.showFieldModalListRef, 0, 0, $event,this.$refs.tagsDone)
            });
        },
        getDefaultRow (row) {
           if(row){
            this.defaultRow = row
            this.defaultInputPlaceholderTxt = `默认按照${row.label}搜索`
            this.visibleModalDefault = false
            // this.selectFieldRow = row
            // console.log(row,"row..")

            // let index = this.selectFieldArr.findIndex((el)=>{
            //     return el.field == row.field
            // })
            // if(index == -1){
            //     this.selectFieldArr.push(row)
            // }
           }
        }
    },
    activated () { },
}
</script>
<style>
.el-popover {
    padding: 12px 0;
}
</style>
<style lang='scss' scoped>
@import './varConfig.scss';

.search-box {
    display: flex;
    flex-direction: row;
    border: 1px solid $borderColor;
    height: 35px;
    border-radius: 7px;
    position: relative;

    .search-line {
        display: flex;
        flex-direction: row;
        flex: 1;

        .sInput {
            flex: 1;
            border: none;
            padding-left: 7px;
            font-size: $inputFontSize;
            border-radius: 7px;
        }

        .delAll {
            font-size: 20px;
            cursor: pointer;
            line-height: 39px;
            padding: 0 7px;

            &:hover {
                color: $hoverFontColor;
            }
        }

        .tags-obj {
            color: #212224;
            margin: 2px 3px;
            padding: 0px 5px;
            line-height: 30px;
            position: relative;
            font-size: 12PX;
        }
    }

    .search-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 100px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            top: 10px;
            width: 1px;
            background-color: $borderColor;
        }

        i {
            font-size: 24px;
            padding: 0 7px;
            cursor: pointer;

            &:hover {
                color: $hoverFontColor
            }
        }
    }
}
</style>